<template>
  <div>
    <van-nav-bar
      title="立即评价"
      right-text="提交"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <div class="comment-star">
      <span class="star-text">商品评价</span>
      <van-rate v-model="value" />
    </div>
    <van-field
      class="comment-txt"
      v-model="textValue"
      type="textarea"
      placeholder="有何高见？"
    />
    <div class="img-upload">
      <van-uploader
        v-model="fileList"
        multiple
        :max-count="3"
      />
    </div>
  </div>
</template>

<script>
import { NavBar, Rate, Field, Uploader } from "vant";
import { atOnceEvaluation } from "@/network";

export default {
  name: "Comment",
  data() {
    return {
      orderId: "",
      value: 0,
      textValue: "",
      fileList: [],
      orderInfo: null,
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [Rate.name]: Rate,
    [Uploader.name]: Uploader,
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async onClickRight() {
      const arr = [];
      for (let i of this.fileList) {
        arr.push(i.content);
      }
      console.log(arr);
      const info = {
        orderGoodsId: this.orderInfo.goodsList[0].id,
        content: this.textValue,
        star: this.value,
        hasPicture: this.fileList.length === 0 ? false : true,
        filePath: arr,
      };
      console.log(info);
      const res = await atOnceEvaluation(info);
      console.log(res);
    },
  },
  created() {},
  mounted() {
    console.log(this.$route.query.item);
    this.orderInfo = this.$route.query.item;
  },
};
</script>

<style lang="less" scoped>
.comment-star {
  border-bottom: 1px solid rgb(228, 228, 228);
  width: 90%;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  .star-text {
    font-size: 14px;
    margin-right: 20px;
  }
}
.comment-txt {
  height: 200px;
}
.img-upload {
  width: 90%;
  margin: 0 auto;
}
</style>

